<template>
  <div class="p-2">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="130px" >
      <el-form-item label="页面图片" prop="bodyImg">
        <JqtOssLibrary v-model="formData.bodyImg" :limit="10" :isObject="false"></JqtOssLibrary>
      </el-form-item>
      <el-form-item label="右边悬浮图片" prop="rightImg">
        <JqtOssLibrary v-model="formData.rightImg" :limit="1" :isObject="false"></JqtOssLibrary>
      </el-form-item>
      <el-form-item label="底部悬浮图片" prop="bottomImg">
        <JqtOssLibrary v-model="formData.bottomImg" :limit="1" :isObject="false"></JqtOssLibrary>
      </el-form-item>
      <el-form-item label="底部悬浮距离" prop="doorId">
        <el-input-number v-model="formData.bottomDistance" :min="0"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">

import JqtOssLibrary from '@/components/JqtOssLibrary/index.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable,bus_spread_link_page_mode } = toRefs<any>(proxy?.useDict('sys_normal_disable','bus_spread_link_page_mode'));
const formRef = ref<ElFormInstance>();
export interface ImageModeVo {
  //页面图片
  bodyImg?: string;
  //右边图片
  rightImg?: string;
  //底部图片
  bottomImg?: string;
  //底部 距离
  bottomDistance?: number;
}
const formData = reactive<ImageModeVo>({
  //页面图片
  bodyImg: undefined,
  //右边图片
  rightImg: undefined,
  //底部图片
  bottomImg: undefined,
  //底部 距离
  bottomDistance: 0,
});

const rules = {
  bodyImg: [
    { required: true, message: '请上传图片', trigger: 'blur' },
  ],
  rightImg: [
    { required: true, message: '请上传图片', trigger: 'blur' },
  ],
  bottomImg: [
    { required: true, message: '请上传图片', trigger: 'blur' },
  ],
};
const props = defineProps({
  modelValue: Object,
});

onMounted(() => {
// 在初始化时设置 formData
  Object.assign(formData, props.modelValue);
});

const emit = defineEmits(['update:modelValue','confirmCallBack']);
watch(formData, (newVal, oldVal) => {
  emit('update:modelValue', newVal);
  emit('confirmCallBack', newVal);
}, { deep: true, immediate: true });

watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    Object.assign(formData, newVal);
  }
}, { deep: true, immediate: true });


const validateForm = () => {
  return new Promise((resolve, reject) => {
    if (!formRef.value) {
      reject(new Error('表单引用不存在'));
      return;
    }
    formRef.value.validate(valid => {
      if (valid) {
        resolve(true);
      } else {
        reject(new Error('图片表单填写不完整'));
      }
    });
  });
};

defineExpose({
  validateForm,
});
</script>

<style scoped>
.box-card {
  margin-bottom: 20px; /* 卡片底部间距 */
  border-radius: 10px;
}
</style>
